<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelName"
        filterable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        clearable
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in options"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channel_name"
        />
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleExport"
      >
        导出
      </el-button>
    </div>
    <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="totalData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="日期" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="贷超名称" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.loanExcessName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="今日爆款" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.popularToday }}</span>
            </template>
          </el-table-column>
          <el-table-column label="推荐产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.recommendedProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信用贷" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.creditLoan }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员专享" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.exclusiveMembers }}</span>
            </template>
          </el-table-column>
          <el-table-column label="车抵贷" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.carMortgage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房抵贷" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.housingMortgage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="公积金贷" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.providentFundLoan }}</span>
            </template>
          </el-table-column>
          <el-table-column label="风险检测产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.riskDetectionProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="待完成" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.productsCompleted }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权益会员专属" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.exclusiveEquityMembers }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员评估产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.memberEvaluationProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="非会员评估产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.noMemberEvaluationProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="盲乐悬浮广告" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.blindMusicAdvertisement }}</span>
            </template>
          </el-table-column>
           <el-table-column label="下拉弹窗" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.pullDown }}</span>
            </template>
          </el-table-column>
           <el-table-column label="挽回弹窗" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.savePopUp }}</span>
            </template>
          </el-table-column>
           <el-table-column label="查看结果推荐" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.viewResults }}</span>
            </template>
          </el-table-column>
          <el-table-column label="头部" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.head }}</span>
            </template>
          </el-table-column>
    </el-table>
    <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :show-header="false"
        >
          <el-table-column label="日期" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="贷超名称" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.loanExcessName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="今日爆款" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.popularToday }}</span>
            </template>
          </el-table-column>
          <el-table-column label="推荐产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.recommendedProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信用贷" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.creditLoan }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员专享" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.exclusiveMembers }}</span>
            </template>
          </el-table-column>
          <el-table-column label="车抵贷" width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.carMortgage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房抵贷" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.housingMortgage }}</span>
            </template>
          </el-table-column>
          <el-table-column label="公积金贷" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.providentFundLoan }}</span>
            </template>
          </el-table-column>
          <el-table-column label="风险检测产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.riskDetectionProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="待完成" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.productsCompleted }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权益会员专属" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.exclusiveEquityMembers }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会员评估产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.memberEvaluationProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="非会员评估产品" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.noMemberEvaluationProducts }}</span>
            </template>
          </el-table-column>
          <el-table-column label="盲乐悬浮广告" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.blindMusicAdvertisement }}</span>
            </template>
          </el-table-column>
           <el-table-column label="下拉弹窗" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.pullDown }}</span>
            </template>
          </el-table-column>
           <el-table-column label="挽回弹窗" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.savePopUp }}</span>
            </template>
          </el-table-column>
           <el-table-column label="查看结果推荐" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.viewResults }}</span>
            </template>
          </el-table-column>
           <el-table-column label="头部" min-width="80" align="center">
            <template slot-scope="{row}">
              <span>{{ row.head }}</span>
            </template>
          </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getLoanTotal"
        />
  </div>
</template>

<script>
import { loanExcessTotal,loanExcessTotalExport} from "@/api/loanExcess";
import { getChannelIdAndNick } from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' 

export default {
 components: { Pagination },
 directives: { waves },
  data() {
    return {
      listQuery: {
        channelName: "",
        current: 1,
        endTime: "",
        size: 10,
        startTime: "",
      },
      tableData:[],
      totalData:[],
      optionsCopy: [],
      options: [],
      times: [],
      total:0
    };
  },
  created() {
    this.getLoanTotal(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    async getLoanTotal() {
      const res = await loanExcessTotal(this.listQuery);
      this.tableData=res.data.data.list.records
      this.totalData=res.data.data.total
      this.total=res.data.data.list.total
    },
     dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          console.log(item)
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick()
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.getLoanTotal(this.listQuery)
    },
    handleExport(){
        loanExcessTotalExport(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          })
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped></style>
